<template>
   <view class="vote_detail">
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo" ></userinfo>
		<villageChooseHouse v-if="choose_options.need_choose_house" :options="choose_options" @chooseHouseId="chooseHouseId"></villageChooseHouse>
      <view v-if="page_from != 'list'" class="vote_top_box van-hairline--bottom" @click="return_list">
        <view class="tip">
          <view style="display: flex;">
            <view style="width: 10%;">
			 <image mode="aspectFill" style="width: 25px;height: 25px;" src=""></image>  
			</view>
            <view style="width: 90%;">&nbsp;{{title}}</view>
          </view>
        </view>
      </view>
      <view class="vote_content_box">
        <view class="content_title">
          <view>
            <view>{{vote_data['vote_title']}}</view>
          </view>
        </view>
        <view class="content_title_des" :style="vote_data.vote_des_style">
          <view>
            <view>{{vote_data['vote_des']}}</view>
          </view>
        </view>
        <view class="content_title_img" v-if="vote_data.vote_image">
          <view class="img_box" v-for="(item, index) in vote_data.vote_image">
            <image v-if="item.file_url" mode="widthFix" :src="item.file_url" style="width: 100%;"></image>
          </view>
        </view>
        <view class="content_subject" v-if="vote_data.vote_block">
            <view class="subject_box" v-for="(item,index) in vote_data.vote_block">
              <view class="subject_item" v-if="item.block_type == 1">
                <view class="subject_title">
                  <text v-show="item.is_write == 1">*</text>
                  {{block_title_index(index)}}.
                  {{item.block_title}}
                </view>
                <view class="subject_content_1" :class="item.active">
					<view class="uni-form-item uni-column">
						<input class="uni-input input_msg" v-if="(!is_join || limit_user_set!=2) && vote_status==1" v-model="item.option_txt"  @focus="block_box_focus(index)" @blur="block_box_blur(index)" placeholder="请输入" />
						<input class="uni-input disabled_msg" :disabled="true" v-if="(is_join && limit_user_set==2) || vote_status==2" v-model="item.option_txt"/>
					</view>
                </view>
                <view class="error_msg">
                  {{item.error}}
                </view>
              </view>
              <view class="subject_item" v-if="item.block_type == 2">
                <view class="subject_title">
                  <text v-show="item.is_write == 1">*</text>
                  {{block_title_index(index)}}.
                  {{item.block_title}}
                </view>
                <view class="subject_content_2" :class="item.active">
				    <view class="uni-textarea" style="border: none;width: calc(100% - 32px);">
						<textarea maxlength="-1" style="width: 100% !important;" placeholder-style="color:#969799,font-size:14px;" v-if="(!is_join || limit_user_set!=2) && vote_status==1" v-model="item.option_txt" @focus="block_box_focus(index)" @blur="block_box_blur(index)" placeholder="请输入" auto-height/>
						<textarea :disabled="true" maxlength="-1" style="width: 100% !important;" auto-height placeholder-style="color:#969799,font-size:14px;" placeholder="未输入信息" v-if="(is_join && limit_user_set==2) || vote_status==2" v-model="item.option_txt"/>
					</view>
                </view>
                <view class="error_msg">
                  {{item.error}}
                </view>
              </view>
             <view class="subject_item" v-if="item.block_type == 3 && item.info_options">
                <view class="subject_title">
                  <text v-show="item.is_write == 1">*</text>
                  {{block_title_index(index)}}.
                  {{item.block_title}}
                </view>
                <view class="subject_content_3" :class="item.active">
					 <view class="uni-list" v-if="(!is_join || limit_user_set!=2) && vote_status==1">
						<radio-group style="font-size: 14px;" @change="radioChange($event, index)">
							<label v-for="(option, key) in item.info_options" :key="option.option_id">
								<view style="display: flex;padding-bottom: 16px;" v-if="option.option_type==0">
									<radio :value="option.option_id" :checked="option.option_id == item.choose_option_id" />
									<view>
									{{option.option_name}}
									 <text class="vote_statistics_tip" v-if="1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']">(该选项共{{option.option_number}}人选择)</text>
									</view>
								</view>
								<view style="display: flex;" v-if="option.option_type==1">
									<radio :value="option.option_id" :checked="option.option_id == item.choose_option_id" />
									<view class="textarea_box">
										<view class="uni-textarea" style="border: none;">
											<textarea :focus="option.option_id == choose_option_id" maxlength="-1" style="width: 100% !important;" placeholder-style="color:#969799,font-size:14px;" v-model="item.option_txt" auto-height/>	
										</view>
									</view>
								</view>
								<text class="vote_statistics_tip" v-if="1==option.option_type && 1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']" style="padding-left: 32px;">(该选项共{{option.option_number}}人选填)</text>
							</label>
						</radio-group>
					</view>
					 <view class="uni-list" v-if="(is_join && limit_user_set==2) || vote_status==2">
						<radio-group style="font-size: 14px;">
							<label v-for="option in item.info_options" :key="option.option_id">
								<view style="display: flex;padding-bottom: 16px;" v-if="option.option_type==0">
									<radio :disabled="true" :value="option.option_id" :checked="option.option_id == item.choose_option_id" />
									<view>
									{{option.option_name}}
									 <text class="vote_statistics_tip" v-if="1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']">(该选项共{{option.option_number}}人选择)</text>
									</view>
								</view>
								<view style="display: flex;" v-if="option.option_type==1">
									<radio :disabled="true" :value="option.option_id" :checked="option.option_id == item.choose_option_id" />
									<view class="textarea_box">
										<view class="uni-textarea" style="border: none;">
											<textarea :disabled="true" :focus="option.option_id == choose_option_id" maxlength="-1" style="width: 100% !important;" placeholder-style="color:#969799,font-size:14px;" v-model="item.option_txt" auto-height/>	
										</view>
									</view>
								</view>
								<text class="vote_statistics_tip" v-if="1==option.option_type && 1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']" style="padding-left: 32px;">(该选项共{{option.option_number}}人选填)</text>
							</label>
						</radio-group>
					</view>
                </view>
                <view class="error_msg">
                  {{item.error}}
                </view>
              </view>
              <view class="subject_item" v-if="item.block_type == 4 && item.info_options">
                <view class="subject_title">
                  <text v-show="item.is_write == 1">*</text>
                  {{block_title_index(index)}}.
                  {{item.block_title}}
                </view>
                <view class="subject_content_4" :class="item.active">
					 <view class="uni-list" v-if="(!is_join || limit_user_set!=2) && vote_status==1">
						<checkbox-group @change="checkboxChange($event, index)" v-model="item.choose_option_id">
							<label v-for="option in  item.info_options" :key="option.option_id">
								<view style="display: flex;padding-bottom: 16px;" v-if="0==option.option_type">
									<checkbox shape="square" :value="option.option_id" :checked="check_choose(option.option_id, item.choose_option_id)" />
									<view>
									{{option.option_name}}
									 <text class="vote_statistics_tip" v-if="1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']">(该选项共{{option.option_number}}人选择)</text>
									</view>
								</view>
								<view style="display: flex;padding-bottom: 16px;" v-if="1==option.option_type">
									<checkbox shape="square" :value="option.option_id" :checked="check_choose(option.option_id, item.choose_option_id)" />
									<view class="textarea_box">
										<view class="uni-textarea" style="border: none;">
											<textarea :focus="check_choose(option.option_id, item.choose_option_id)" maxlength="-1" style="width: 100% !important;" placeholder-style="color:#969799,font-size:14px;" v-model="item.option_txt" auto-height/>	
										</view>
									</view>
								</view>
								<text class="vote_statistics_tip" v-if="1==option.option_type && 1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']" style="padding-left: 32px;">(该选项共{{option.option_number}}人选填)</text>
							</label>
						</checkbox-group>
					 </view>
					 <view class="uni-list" v-if="(is_join && limit_user_set==2) || vote_status==2">
						<checkbox-group @change="checkboxChange($event, index)" v-model="item.choose_option_id">
							<label v-for="option in  item.info_options" :key="option.option_id">
								<view style="display: flex;padding-bottom: 16px;" v-if="0==option.option_type">
									<checkbox shape="square" :disabled="true" :value="option.option_id" :checked="check_choose(option.option_id, item.choose_option_id)" />
									<view>
									{{option.option_name}}
									 <text class="vote_statistics_tip" v-if="1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']">(该选项共{{option.option_number}}人选择)</text>
									</view>
								</view>
								<view style="display: flex;padding-bottom: 16px;" v-if="1==option.option_type">
									<checkbox shape="square" :disabled="true" :value="option.option_id" :checked="check_choose(option.option_id, item.choose_option_id)" />
									<view class="textarea_box">
										<view class="uni-textarea" style="border: none;">
											<textarea :disabled="true" :focus="check_choose(option.option_id, item.choose_option_id)" maxlength="-1" style="width: 100% !important;" placeholder-style="color:#969799,font-size:14px;" v-model="item.option_txt" auto-height/>	
										</view>
									</view>
								</view>
								<text class="vote_statistics_tip" v-if="1==option.option_type && 1==vote_data['limit_open'] && option['option_number']!='0' && 2==vote_data['vote_status']" style="padding-left: 32px;">(该选项共{{option.option_number}}人选填)</text>
							</label>
						</checkbox-group>
					 </view>
                </view>
                <view class="error_msg">
                  {{item.error}}
                </view>
              </view>
             <view class="subject_item" v-if="item.block_type == 5">
                <view class="subject_title">
                  <text v-show="item.is_write == 1">*</text>
                  {{block_title_index(index)}}.
                  {{item.block_title}}
                </view>
                <view class="subject_content_5" :class="item.active">
					<view style="display: flex;" v-if="(!is_join || limit_user_set!=2) && vote_status==1">
						<uniRate size="26" max="5" isFill="true" activeColor="rgb(24, 144, 255)" @change='taprate($event, index)'  :value="item.option_num"></uniRate>
						<text v-if="item.option_num>0" style="line-height: 28px;width: 100%;text-align: right;">{{item.option_num}}.0</text>
					</view>
					<view style="display: flex;" v-if="(is_join && limit_user_set==2) || vote_status==2">
						<uniRate size="26" disabled="true" max="5" isFill="true" activeColor="rgb(24, 144, 255)" @change='taprate($event, index)' :value="item.option_num"></uniRate>
						<text v-if="item.option_num>0" style="line-height: 28px;width: 100%;text-align: right;">{{item.option_num}}.0</text>
					</view>
                </view>
                <view class="error_msg">
                  {{item.error}}
                </view>
              </view>
            </view>
        </view>

        <view class="vote_submit" v-if="(!is_join || limit_user_set!=2) && 1==vote_status">
			<button type="primary" @tap="vote_join">提交</button>
        </view>
      </view>
    </view>
</template>

<script>
import villageChooseHouse from '../../appComponent/villagePage/villageChooseHouse';
import uniRate from "../../appComponent/uni/uni-rate/uni-rate.vue"
var common = require('../../utils/common.js');
var app = getApp();
var _this;
export default {
  name: 'vote_detail',
  components: {
	uniRate
  },
  data () {
    return {
	  user_options: {},
	  choose_options: {},
      'title': '投票列表',
      vote_id: 0,
      border_cell_group: false,
      vote_data: [],
      vote_status: 1,
      err_msg: false,
      is_join: false,
      limit_user_set: 1,
      pigcms_id: '',
      village_id: '',
	  choose_option_id: '',
	  page_from: ''
    }
  },
  onLoad: function (options) {
    console.log('vote_detail_options', options)
	_this = this;
	if(options.from){
		_this.page_from = options.from;
	}
	
	common.setMainColor(_this, function(config) {
	
	});
	
	if (options && options.vote_id) {
		_this.vote_id = options.vote_id
	}
	if (options && options.village_id) {
		_this.village_id = options.village_id
	}
	const res = uni.getStorageSync('village_key');
	if (res) {
		_this.village_id = res.village_id;
		_this.pigcms_id = res.pigcms_id;
		_this.village_name = res.village_name;
	}
	// #ifdef H5
		if(_this.village_id){
			_this.setWxShare()
		}
	// #endif
	if (app.globalData.is_login) {
		if (!_this.village_id) {
			console.log('village_id++++++++', _this.village_id);
			uni.showModal({
				title: common.changeTxt('提示'),
				content: common.changeTxt('您没有选择小区,请选择一个小区浏览'),
				showCancel: false,
				confirmText: common.changeTxt('选择'),
				success: function(res) {
					if (res.confirm) {
						var url = '/pages/village/my/villagelist';
						if (_this.property_id && _this.property_id > 0) {
							url += '?property_id=' + _this.property_id;
						}
						uni.redirectTo({
							url: url
						});
					}
				}
			});
		} else if (!_this.pigcms_id) {
			_this.choose_options = {
				need_choose_house: true,
				village_id: _this.village_id,
				after_event: '',
				canCancle: false,
				bindHasCancleMethod: false
			}
		} else {
			_this.getVoteDetail()
		}
	}else{
		_this.user_options = {
			toLogin: true
		};
	}
  },
  methods: {
	onShareAppMessage: function () {
		return {
			title: '【'+_this.village_name+'】' + _this.vote_data.vote_title,
			desc: _this.vote_data.vote_des,
			path: '/pages/vote/voteDetail?from=share&village_id=' + _this.village_id + '&vote_id=' + _this.vote_id
		};
	},
	setWxShare() {
		let pageLink = `${common.requestDomain}packapp/${common.wxapp_type}/pages/vote/voteDetail?from=share&village_id=${_this.village_id}&vote_id=${_this.vote_id}`
		pageLink = common.addShareParam(pageLink)
		let shareWxLink = pageLink;
		var shareData = {
			title: '【'+_this.village_name+'】' + _this.vote_data.vote_title,
			desc: _this.vote_data.vote_des,
			sendFriendLink: shareWxLink,
			share_img: _this.village_logo
		}
		console.log('vote_shareData', shareData);
		common.setWxShare(shareData)
	},
	chooseHouseId(param){
		_this.pigcms_id = param.pigcms_id;
		_this.getVoteDetail()
		// #ifdef H5
			if(_this.village_id){
				_this.setWxShare()
			}
		// #endif
	},
	taprate: function(e,index){
		var ratenum = e.value
		_this.vote_data.vote_block[index]['option_num'] = ratenum
		console.log('index', index);
		console.log('ratenum', ratenum);
	},
	radioChange: function(evt,index) {
		var val = evt.target.value
		_this.vote_data.vote_block[index]['choose_option_id'] = val
		_this.choose_option_id = val
		console.log('val', val);
		console.log('index_opion', _this.vote_data.vote_block[index]);
	},
	checkboxChange: function(evt,index) {
		var val = evt.detail.value
		if (_this.vote_data.vote_block[index] && !_this.vote_data.vote_block[index]['choose_option_id']) {
			_this.vote_data.vote_block[index]['choose_option_id'] = []
		}
		_this.vote_data.vote_block[index]['choose_option_id'] = val
		var vals = evt.target.value
		console.log('val', val);
		console.log('evt', evt);
		console.log('index_opion', _this.vote_data.vote_block[index]);
	},
    return_list: function () {
		if(_this.page_from == 'list'){
			uni.navigateBack();
		}else{
			var url = '/pages/vote/index?'
			if (_this.pigcms_id && _this.pigcms_id>0) {
				url +='&pigcms_id=' + _this.pigcms_id
			}
			if (_this.village_id && _this.village_id>0) {
				url +='&village_id=' + _this.village_id
			}
			uni.redirectTo({
				url: url
			});
		}
    },
    getVoteDetail () {
      var params = {}
	  if (_this.vote_id && _this.vote_id>0) {
		params['vote_id'] = _this.vote_id
	  }
	  if (_this.pigcms_id && _this.pigcms_id>0) {
		params['pigcms_id'] = _this.pigcms_id
	  }
	  if (_this.village_id && _this.village_id>0) {
		params['village_id'] = _this.village_id
	  }
	  common.plugin_post('Api&a=vote_detail', params, data => {
		  console.log('vote_detail', data);
		  if (data && data) {
			_this.vote_data = data
			_this.is_join = data.is_join
			_this.limit_user_set = data.limit_user_set
			_this.vote_status = data.vote_status
		  }
	  },this,'back')
    },
    voteJoin (vote_join) {
      var params = {}
      params['vote_id'] = _this.vote_id
      params['block_info'] = vote_join
      params['pigcms_id'] = _this.pigcms_id;
      params['village_id'] = _this.village_id;
	  common.plugin_post('Api&a=vote_join', params, data => {
		  if (data && data.vote_id && (!data.limit_num || data.limit_num<=1)) {
			uni.showModal({
				title: common.changeTxt('提示'),
				content: common.changeTxt('投票成功'),
				showCancel: false,
				cancelText: common.changeTxt('确认'),
				success: function(res) {
					_this.return_list();
				}
			});
		  } else if(data.limit_num && data.limit_num>1) {
			uni.showModal({
				title: common.changeTxt('提示'),
				content: common.changeTxt('投票成功'),
				showCancel: true,
				cancelText: common.changeTxt('返回'),
				confirmText: common.changeTxt('继续投票'),
				success: (res) => {
					if (res.confirm) {
						_this.getVoteDetail()
					} else {
						// wx.navigateBack();
						var url = '/pages/vote/index';
						uni.navigateTo({
							url: url
						});
					}
					console.log('res',res)
				},
				fail: () => {
					wx.navigateBack();
				}
			})
		  }
	  })
    },
    vote_join: function () {
      var vote_block = this.vote_data.vote_block
      if (_this.err_msg) {
		uni.showToast({
			title: `请填写必填项`,
			icon: 'none'
		});
        return true
      }
      console.log('err_msg', _this.err_msg)
      console.log('vote_block', vote_block)
      if (_this.vote_data && 2 == _this.vote_data.limit_user_set) {
		uni.showModal({
			title: common.changeTxt('提示'),
			content: common.changeTxt('提交后不可修改，是否确定提交。'),
			showCancel: true,
			cancelText: common.changeTxt('取消'),
			confirmText: common.changeTxt('确定'),
			success: function(res) {
				if (res.confirm) {
					console.log('取消')
				} else if (res.cancel) {
					_this.voteJoin(vote_block)
				}
			}
		});
      } else {
        _this.voteJoin(vote_block)
      }
    },
    choose_single: function (index) {
      console.log('index', index)
    },
    block_title_index: function (index) {
      return parseInt(index) + 1
    },
    check_choose: function (option_id,arr) {
		if (arr.indexOf(option_id) != -1) {
			return true;
		} else {
			return false;
		}
    },
    block_box_focus: function (index) {
      console.log('index', index)
      _this.vote_data.vote_block[index]['active'] = 'active'
      _this.vote_data.vote_block[index]['error'] = ''
    },
    block_box_blur: function (index) {
      console.log('index', _this.vote_data.vote_block[index])
      if (_this.vote_data.vote_block[index]['is_write'] == 1 && !this.vote_data.vote_block[index]['option_txt']) {
        _this.vote_data.vote_block[index]['active'] = 'error_message'
        _this.vote_data.vote_block[index]['error'] = '此处为必填，请输入'
        _this.err_msg = true
      } else {
        _this.vote_data.vote_block[index]['active'] = ''
        _this.err_msg = false
      }
    }
  }
}
</script>

<style>
   .vote_detail {
		background-color: white; 
	}
  .vote_detail .vote_top_box {
    padding: 40rpx 40rpx 20rpx;
  }
  .vote_detail .vote_top_box .van-icon {
    font-size: 50rpx;
  }
  .vote_detail .vote_top_box .tip {
    font-size: 30rpx;
    line-height: 50rpx;
    color: #535252;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
  }
  .vote_detail .vote_content_box {
    padding: 50rpx 84rpx 84rpx;
  }
  .vote_detail .vote_content_box .content_title {
    text-align: center;
    font-size: 40rpx;
    line-height: 56rpx;
    color: #333;
    word-break: break-all;
  }
  .vote_detail .vote_content_box .content_title_des{
    margin-top: 16rpx;
    margin-bottom: 0;
    font-size: 24rpx;
    color: #9b9b9b;
    line-height: 40rpx;
    word-break: break-all;
    white-space: pre-wrap;
    font-family: inherit;
    text-align: center;
    overflow: visible;
  }
  .vote_detail .content_title_img .img_box {
    padding-top: 30rpx;
  }
  .vote_detail .uni-textarea {
	  width: 100% !important;
  }
   .vote_detail .uni-input.input_msg {
	   font-size: 28rpx;
	   line-height: 48rpx;
   }
   .vote_detail .uni-input.disabled_msg {
	   color: #969799;
	   -webkit-text-fill-color: #969799;
	   background-color: transparent;
	   opacity: 1;
	   font-size: 28rpx;
	   line-height: 48rpx;
   }
  
  
  .vote_detail .content_subject {
    margin-top: 70rpx;
  }
  .vote_detail .subject_title {
    position: relative;
    font-size: 32rpx;
    line-height: 48rpx;
    color: #535252;
    margin-bottom: 32rpx;
    word-break: break-all;
  }
  .vote_detail .subject_title span{
    color: #e97663;
  }
  .vote_detail .subject_content_1 {
    border-bottom: 2rpx solid #d6d6d6;
    padding-bottom: 20rpx;
  }
  .vote_detail .subject_content_1.active {
    border-color: #3692f5;
  }
  .vote_detail .subject_content_1.error_message {
    border-color: #ea5035;
  }
  .vote_detail .error_msg{
    position: static;
    margin-top: 12rpx;
    color: #ea5035;
    font-size: 24rpx;
    line-height: 32rpx;
  }
  .vote_detail .subject_content_1 .van-cell {
    padding: 20rpx 0;;
  }
  .vote_detail .subject_content_2 {
    border: 2rpx solid #d6d6d6;
    padding: 20rpx 32rpx;
  }
  .vote_detail .subject_content_2.active {
    border-bottom-color: #3692f5;
  }
  .vote_detail .subject_content_2.error_message {
    border-bottom-color: #ea5035;
  }
  .vote_detail .subject_item {
    margin-bottom: 84rpx;
  }
  .vote_detail .subject_content_3 .van-radio {
    padding-bottom: 32rpx;
    font-size: 29rpx;
  }
  .vote_detail .subject_content_3 .textarea_box {
    border-bottom: 2rpx solid #d6d6d6;
    padding-bottom: 20rpx;
	width: calc(100% - 64rpx);
  }
  .vote_detail .subject_content_4 .van-checkbox {
    padding-bottom: 32rpx;
    font-size: 28rpx;
  }
  .vote_detail .subject_content_4 .textarea_box {
    border-bottom: 2rpx solid #d6d6d6;
    padding-bottom: 20rpx;
	width: calc(100% - 64rpx);
  }
  .vote_detail .vote_statistics_tip {
    font-size: 24rpx;
    color: #666666;
  }
  .vote_detail .subject_content_3 .van-radio__label {
    width: 100%;
  }
  .vote_detail .subject_content_4 .van-checkbox__label {
    width: 100%;
  }
  .vote_detail .vote_submit .van-button--large {
    height: 84rpx;
    line-height: 80rpx;
  }
  .vote_detail .img_box .van-image {
    width: 100%;
  }
  .vote_detail .content_title_img .img_box img{
    max-height: 400rpx;
  }
</style>
